<template>
  <div>
    <!--房屋图像-->
    <div class="house-title">
      <van-cell title="房屋图像" />
      <van-field v-model="valueImg" class="Img">
        <template #input>
          <van-uploader :after-read="afterRead" v-model="fileList" multiple>
            <div class="uploader-wrap">
              <van-icon name="plus" />
            </div>
          </van-uploader>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { publishHouseImage } from '@/api'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      valueImg: '',
      imgArr: [],
      fileList: []
    }
  },
  computed: {
    ...mapState(['rentHouse'])
  },
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['updateRentHouse']),
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file)
      // console.log(file.file)
      const obj = this.rentHouse

      // 获取文件地址
      const formData = new FormData()
      formData.append('file', file.file)
      const { data } = await publishHouseImage(formData)
      // console.log(data)
      const imgArr = data.body
      this.imgArr.push(...imgArr)
      console.log(this.imgArr)
      // 处理成正确的参数格式
      obj.houseImg = this.imgArr.join('|')
      this.updateRentHouse(obj)
    }
  }
}
</script>

<style scoped lang="less">
.Img {
  border-bottom: none !important;
}
.uploader-wrap {
  width: 160px;
  height: 160px;
  border: 1px solid #ccc;
  color: #ccc;
  font-size: 50px;
  text-align: center;
  line-height: 160px;
}
</style>
